<template>
    <sky-base-page ref="skyBasePageRef" bg-page-color="#f5f5f5" >
        <sky-card>
            <uni-forms ref="formRef" :modelValue="formData" :rules="rules">
                <uni-forms-item label="评分" name="content">
                    <up-rate count="5" v-model="formData.rating" size="26" activeColor="orange"></up-rate>
                </uni-forms-item>
                <uni-forms-item label="评论内容" name="content">
                    <uni-easyinput type="textarea" v-model="formData.content" placeholder="请输入姓名"/>
                </uni-forms-item>
                <uni-forms-item label="图片" name="images">
                    <qly-upload-multiple v-model="formData.images" accept="image"></qly-upload-multiple>
                </uni-forms-item>
            </uni-forms>
        </sky-card>
        <template #footer>
            <button type="primary" @click="qly.form.pass(submit,formRef)">提交</button>
        </template>
    </sky-base-page>
</template>
<script setup>

const formRef = ref()
const formData = ref({
    content: 'admin1',
    images: [],
    rating:1
})
const rules = {
    content: {
        rules: [
            {
                required: true,
                errorMessage: '请填写用户名',
            },
        ],
    },
    images: {
        rules: [
            {
                required: true,
                errorMessage: '请填写密码',
            },
        ],
    }
}

const form=computed(()=>{
    return {
        order_id:qly.page.params.id,
        content:formData.value.content,
        rating:formData.value.rating,
        images:formData.value.images.map(item=>item.url)
    }
})

// 登录
const submit = async () => {
    const res = await qly.api.order.orderComment(form.value)
    console.log('res', res)
    if (res.code === 1) {
        uni.$emit('commentSuccess')
        qly.dialog.success('提交成功')
        uni.navigateBack()
    } else {
        qly.dialog.apiError(res).catch()
    }
}

console.log('import.meta.env.MODE',import.meta.env.MODE)
console.log('qly',qly)
</script>
<style scoped lang="scss">
:deep(.uni-forms-item__content){
    display: flex;
    align-items: center;
}
</style>
